import React, { useEffect, useState } from 'react'
import { Breadcrumb, Layout } from "antd"
import { Switch, Route, Redirect } from 'react-router-dom'
import PubSub from 'pubsub-js'
import Home from '../../components/Home'
import Tag from '../../components/Tag'
import Classes from '../../components/Classes'
import Message from '../../components/Message'
import BlogEdit from '../../components/Blog/BlogEdit'
import BlogList from '../../components/Blog/BlogList'


const barMap = {
    '/admin/home': '首页',
    '/admin/tag': '标签管理',
    '/admin/classes': '分类管理',
    '/admin/message': '留言管理',
    '/admin/blog/list': '博文列表',
    '/admin/blog/edit': '博文编辑',
    '/admin/blog': '博文管理'
}

// 改变面包屑导航的值
function useBarItem() {
    const [bar, setBar] = useState(['/admin/home'])

    PubSub.unsubscribe('barItem')
    PubSub.subscribe('barItem', (_, data) => {
        setBar(value => {
            if (data.indexOf('blog') !== -1) {
                return ['/admin/blog', data]
            }
            return [data]
        })
    })

    useEffect(() => {
        return () => {
            PubSub.clearAllSubscriptions()
        }
    }, [])

    return {
        bar,
    }

}

const Content = () => {

    const { bar } = useBarItem()

    return (
        <Layout.Content style={{ margin: '0 16px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
                {
                    bar.map((item, index) => {
                        return (
                            <Breadcrumb.Item key={index}>{barMap[item]}</Breadcrumb.Item>
                        )
                    })
                }
            </Breadcrumb>
            <div className="site-layout-background" style={{ padding: 24, minHeight: 500 }}>
                <Switch>
                    <Route path="/admin/home" component={Home} />
                    <Route path="/admin/message" component={Message} />
                    <Route path="/admin/tag" component={Tag} />
                    <Route path="/admin/classes" component={Classes} />
                    <Route path="/admin/blog/list" component={BlogList} />
                    <Route path="/admin/blog/edit" component={BlogEdit} />
                    <Redirect to="/admin/home" />
                </Switch>
            </div>
        </Layout.Content>
    )
}

export default Content
